<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				width: 300px;
				height: 300px;
				background-color: aqua;
			}
			#div2{
				width: 300px;
				height: 300px;
				background-color: peachpuff;
			}
			#div3{
				width: 300px;
				height: 300px;
				background-color: deeppink;
			}
			#div4{
				width: 300px;
				height: 300px;
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<button type="button" id="b1" onclick="btn1()">提交1</button>
		<button type="button" id="b2">提交2</button>
		<button type="button" id="b3">提交3</button>
		<div id="div1" onclick="d1()" onmouseenter="console.log('进入事件');" onmouseleave="console.log('离开事件');" onmousemove="console.log('移动事件');"></div>
		<div id="div2" ></div>
		<div id="div3"></div>
		
		账号：<input type="text" id="username" onfocus="input1();"/><br>
		密码：<input type="password" id="pwd"/><br>
		<button type="button" id="btn" onclick="btn2();">提交</button>
		<div id="div4"></div><br>
		<button type="button" id="b4">添加</button>
		<button type="button" id="b5">删除</button>
	</body>
	<script type="text/javascript">

		// 1.按钮和DIV的单击事件（三种绑定方式）
		function d1(){
			console.log('d1');
		}
		document.getElementById('div2').onclick = function(){
			d1();
		};
		document.getElementById('div3').addEventListener('click',d1);
		
		function btn1(){
			console.log('b1')
		}
		document.getElementById('b2').onclick = function(){
			btn1();
		};
		document.getElementById('b3').addEventListener('click',function(){
			btn1();
		});
		// 2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式）
		function d4(){
			console.log('进入事件');
		}
		function d5(){
			console.log('离开事件');
		}
		function d6(){
			console.log('移动事件');
		}
		document.getElementById('div2').onmouseenter = d4;
		document.getElementById('div2').onmouseleave = d5;
		document.getElementById('div2').onmousemove = function(){
			d6();
		};
		
		document.getElementById('div3').addEventListener('mouseenter',d4);
		document.getElementById('div3').addEventListener('mouseleave',d5);
		document.getElementById('div3').addEventListener('mousemove',d6);
		// 3.登入页面
		// 用户名输入框，
		// 密码输入框，
		// 提交按钮
		
		// 任务   3.1 用户名框获取焦点事件，控制台输出：用户在输入名称
		function input1(){
			console.log('用户在输入名称');
		}
		//          3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
		function input2(){
			if (document.getElementById('username').value == '') {
				alert('没有输入用户名');
			}
		}
		document.getElementById('username').onblur = input2 ;
		//          3.3  密码框获取焦点事件，控制台输出：用户在输入密码
		function input3(){
			console.log('用户在输入密码');
		}
		document.getElementById('pwd').addEventListener('focus',input3)
		//          3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
		function input4(){
			if (document.getElementById('pwd').value == '') {
				alert('没有输入密码');
			}
			
		}
		document.getElementById('pwd').addEventListener('blur',input4)
		//          3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
		//               密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’
		
		function btn2(){
			if(document.getElementById('username').value == '' && document.getElementById('pwd').value == ''){
				alert('用户名和密码为空');
			}else if(document.getElementById('username').value == '') {
				alert('用户名为空');
			}else if(document.getElementById('pwd').value == ''){
			    alert('密码为空');
			}
		}
		// 4.实现DIV移动事件，采用监听器方式操作，可实现添加和清除监听器功能。
		function m1(){
			console.log('移动事件');
		}
		function aa(){
			document.getElementById('div4').addEventListener('mousemove',m1)
		}
		document.getElementById('b4').onclick = aa
		function bb(){
			document.getElementById('div4').removeEventListener('mousemove',m1)
		}
		document.getElementById('b5').onclick = bb
	</script>
</html>
